<template>
  <!-- 个人主页我的文章列表  -->
  <div class="article">
    <div class="article-cover">
      <router-link :to="{name: 'ArticleDetail',params: { id: article.article.id} }">
        <img :src="article.article.cover" alt="没有图片">
      </router-link>
    </div>
    <div class="info">
      <router-link :to="{name: 'ArticleDetail',params: { id: article.article.id} }">
        <div v-if=" article.article.title.length > 30" class="article-title">{{ article.article.title.slice(0,25) + '...' }}</div>
        <div v-else class="article-title">{{ article.article.title }}</div>
        <div class="article-time">{{ formatTime }}</div>
        <div class="article-content">{{ brief }}</div>
        <div class="article-relat">
          <i class="iconfont icon-chakan" /> {{ article.readCount }}
          <i class="iconfont icon-dianzan" /> {{ article.likeCount }}
          <i class="iconfont icon-shoucang" /> {{ article.collectionCount }}
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Article',
  // 接收父组件传来的 article 对象
  props: {
    article: Object()
  },
  // 计算属性
  computed: {
    // 对时间进行格式化
    formatTime: function() {
      if (this.article) {
        const dt = new Date(this.article.article.createTime)
        const month = dt.getMonth() + 1
        const date = dt.getDate()
        return `${month}月${date}日`
      }
      return ''
    },
    // 截取文章内容的前 35 个字，并加上省略号
    brief: function() {
      return this.article.article.description.slice(0, 35) + '...'
    }
  }
}
</script>

<style lang="scss" scoped>
.article {
  width: 800px;
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #dbdbdb;
  &:last-child {
    border: none;
  }
}
.info {
    margin-left:20px;
    margin-top: 10px;
  }
  .article-title {
    font-size: 20px;
    font-weight: 500;
    color: #574266;
    text-align: justify;
  }
  .article-cover {
    flex: none;
    width: 120px;
    // height: 120px;
    margin-right: 10px;
     img {
      width: 100%;
    }
  }
  .article-content, .article-time {
    font-size: 14px;
  }
  .article-time {
    margin: 10px 0;
    color: #c5c5c5;
  }
  .article-relat {
    padding: 20px 0;
  }

  @font-face {
  font-family: "iconfont"; /* Project id 3332477 */
  src: url('//at.alicdn.com/t/font_3332477_84aazre7go8.eot?t=1650808489439'); /* IE9 */
  src: url('//at.alicdn.com/t/font_3332477_84aazre7go8.eot?t=1650808489439#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('//at.alicdn.com/t/font_3332477_84aazre7go8.woff2?t=1650808489439') format('woff2'),
       url('//at.alicdn.com/t/font_3332477_84aazre7go8.woff?t=1650808489439') format('woff'),
       url('//at.alicdn.com/t/font_3332477_84aazre7go8.ttf?t=1650808489439') format('truetype'),
       url('//at.alicdn.com/t/font_3332477_84aazre7go8.svg?t=1650808489439#iconfont') format('svg');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-chakan:before {
  content: "\e628";
}

.icon-quxiaoshoucang:before {
  content: "\e8c2";
}

.icon-shoucang:before {
  content: "\e8c3";
}

.icon-exe-my-attention-primary:before {
  content: "\e915";
}

.icon-wodeguanzhu:before {
  content: "\e60c";
}

.icon-dianzan_kuai:before {
  content: "\ec8c";
}

.icon-pinglun:before {
  content: "\e891";
}

.icon-dianzan:before {
  content: "\ec7f";
}

</style>

